<template> 
  <div class="app-container">
    <header-search class="g-w100 g-h100 colon mainSearchPanel">
      <el-row>
        <el-col :span="24" style="text-align: left">
          <p class="page-header-title">
            <i class="el-icon-right"></i>
            {{title}}
          </p>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <el-form ref="queryForm" :inline="true" >
        <el-form-item label="发布日期">
          <el-date-picker type="daterange" 
            v-model="queryParams.fbrq" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
            @change="onQueryParamChange_fbrq"> </el-date-picker>
        </el-form-item>
        <el-form-item label="井号">
          <el-select filterable clearable placeholder="请选择" v-model="queryParams.jh" style="width: 300px"
          @change="onQueryParamChange_jh">
            <el-option
              v-for="({sjxdm, sjxmc}) in selectorData_jh"
              :key="sjxdm"
              :label="sjxmc"
              :value="sjxdm">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="报告名称">
          <el-select filterable clearable placeholder="请选择" v-model="queryParams.bgmc" style="width: 300px">
            <el-option
              v-for="({sjxdm, sjxmc}) in selectorData_bgmc"
              :key="sjxdm"
              :label="sjxmc"
              :value="sjxdm">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="buttonArea">
          <el-button type="primary" icon="el-icon-search" @click="getListData"> 查询 </el-button>
          <el-button icon="el-icon-refresh" class="commonBtn" @click="resetQuery"> 重置 </el-button>
        </el-form-item>
      </el-form>
    </header-search>

    <page-panel-new class="mainListPanel"  :header-title="title">
      <el-row class="mbBottom">
        <el-col :span="24" style="text-align: right">
          <el-button type="primary" @click="doExportExcel"> 导出 </el-button>
        </el-col>
      </el-row>

      <el-row  v-show="data.length == 0">
        <el-col :span="24" style="text-align: center;color:#999;">
          <span> 请查询数据 </span>
        </el-col>
      </el-row>
      <el-table ref="table-main" v-show="data.length > 0" :data="data" :height="tableHeight" :row-style="{ height: '0px' }"
        :header-cell-style="{ 'text-align': 'center', padding: '0px 0' }" header-cell-class-name="table_header"
        highlight-current-row
        :cell-style="{ padding: '2px', 'text-align': 'center' }" style="width: 100%; height: 100%">
        <el-table-column label="序号" align="right" prop="id" width="50">
          <template slot-scope="scope">
            {{ scope.$index + (queryParams.pageSize * (queryParams.pageNum-1)) + 1 }}
          </template>
        </el-table-column>
        <el-table-column
          v-for="({header, dataIndex, align, width}) in columns"
          :label="header"
          :align="align"
          :key="dataIndex"
          :width="width"
          :prop="dataIndex" show-overflow-tooltip>
        </el-table-column>  
      </el-table>     
      <pagination :total="pagination.total" class="mainListPagination" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getListData" />
    </page-panel-new>



  </div>

</template>
<script lang="ts">
import Vue from 'vue'
import Trend from '@/components/mainEntrance/trend/index.vue'
import { prefix } from '@/config/global'
import {
  getListData,
  getSelectorData_jh,
  getSelectorData_bgmc,
  exportExcel,
} from '@/api/syfxxtApi/khfw/sysjcx/api.js'
import {
  CONTRACT_STATUS,
  CONTRACT_STATUS_OPTIONS,
  CONTRACT_TYPES,
  CONTRACT_PAYMENT_TYPES,
} from '@/constants'
import dayjs from 'dayjs'

const FORM_INITIALDATA = { //录入Form初始化数据
  __rowindex:'',
      optype:'',
      id:'',
    };

const QUERY_PARAMS_INITIALDATA = { //查询参数初始化数据
    pageNum: 1,
    pageSize: 20,
    fbrq:[dayjs().subtract(1, 'month').subtract(6, 'month').format('YYYY-MM-DD'), 
          dayjs().subtract(1, 'day').format('YYYY-MM-DD')],
    jh:'',
    bgmc:'',
  };


export default Vue.extend({
  name: 'Khfw-sysjcx',
  data() {
    return {
      title: '实验数据查询',
      dialogTitle: '',
      thCss: 'custom-th-class',
      tableHeight: window.innerHeight - 320,
      CONTRACT_STATUS,
      CONTRACT_STATUS_OPTIONS,
      CONTRACT_TYPES,
      CONTRACT_PAYMENT_TYPES,
      prefix,
      dataLoading: false,
      data: [], //主表格数据
      columns: [],
      selectorData_jh: [],//查询选择器 井号 下拉数据
      selectorData_bgmc: [], //查询选择器 报告名称 下拉数据
      OpType: {
        Open: false,
        Delete: false,
        OpenFJ: false,
        Export: false,
      },
      selectedRowKeys: [],
      value: 'first',
      formData: { ...FORM_INITIALDATA }, //录入Form数据
      formDisable: false, 
      showPlaceHolder: true, 
      queryParams: {...QUERY_PARAMS_INITIALDATA}, //查询参数
      rules: { //录入验证规则

      },
      rowKey: 'id',
      tableLayout: 'fixed',
      verticalAlign: 'top',
      hover: true,
      pagination: { //翻页配置
        defaultPageSize: 20,
        total: 0,
        defaultCurrent: 1,
      },
      upload: {  //上传配置
        uploadVisible: false, //上传项是否显示，在查看时不显示
        uploadFiles: [], //已上传文件列表
      },
      exportVisible: false,
    }
  },
  computed: {
    showColumn() {
      this.columns.length > 0;
    }
  },
  mounted() {
    this.getSelectorData_jh();
    this.getSelectorData_bgmc();
    this.doLayout();
  },
  methods: {
    // 布局计算
    doLayout() {
      this.$nextTick(()=>{
        var winHeight = 0;
        if (window.innerHeight) {
            winHeight = window.innerHeight;
        } else if (document.body && document.body.clientHeight) {
            winHeight = document.body.clientHeight;
        } 
        else if (document.documentElement && document.documentElement.clientHeight) {
            winHeight = document.documentElement.clientHeight;
        }
        
        var queryPanelHeight = this.$el.querySelector('.mainSearchPanel').offsetHeight;
        var mainPanelHeight = winHeight - queryPanelHeight - 150;
        var paginationHeight = this.$el.querySelector('.mainListPagination').offsetHeight;
        this.$el.querySelector('.mainListPanel').style.height = mainPanelHeight+ 'px';
        this.tableHeight = mainPanelHeight - 130;
      })
    },
    //获取主表格查询数据
    getListData() {
      try {
        this.dataLoading = true  
        const param = {
          start: (this.queryParams.pageNum - 1) * this.queryParams.pageSize,
          limit: this.queryParams.pageSize,
          sel_qsrq: dayjs(this.queryParams.fbrq[0]).format('YYYY-MM-DD'),
          sel_jzrq: dayjs(this.queryParams.fbrq[1]).format('YYYY-MM-DD'),
          sel_jh: this.queryParams.jh,
          sel_bgmc: this.queryParams.bgmc,
        };

        if (!param.sel_qsrq||!param.sel_jzrq) {
          this.$message.error({ content: '请选择查询日期!', placement: 'center' });
          return;
        }
        if (!param.sel_jh) {
          this.$message.error({ content: '请选择查询井号!', placement: 'center' });
          return;
        }
        if (!param.sel_bgmc) {
          this.$message.error({ content: '请选择查询报告名称!', placement: 'center' });
          return;
        }
        getListData(param).then((res) => {
          if (res.success) {
            this.data = res.records;
            this.pagination.total = res.total;
            this.columns = res.columns;
            this.exportDisabled = this.data.length == 0;
            this.queryParams.commitedParam = param;
          } else {
            this.data = []
            this.$message.error({ content: '请重新搜索!', placement: 'center' })
          }
          this.doLayout();
        })
      } catch (error) {
        this.dataLoading = false;
        console.warn('接口提示', error);
        this.doLayout();
      }
    },
    //获取 井号选择器数据
    getSelectorData_jh() {
      try {
        const param = {
          p_qsrq: dayjs(this.queryParams.fbrq[0]).format('YYYY-MM-DD'),
          p_jzrq: dayjs(this.queryParams.fbrq[1]).format('YYYY-MM-DD'),
        };
        getSelectorData_jh(param).then((res) => {
          if (res.success) {
            this.selectorData_jh = res.rows;
          } else {
            this.selectorData_jh = [];
          }
        })
      } catch (error) {
        console.warn('接口提示', error)
      }
    },
    // 获取报告名称选择器数据
    getSelectorData_bgmc() {
      try {
        const param = {
          p_qsrq: dayjs(this.queryParams.fbrq[0]).format('YYYY-MM-DD'),
          p_jzrq: dayjs(this.queryParams.fbrq[1]).format('YYYY-MM-DD'),
          p_jh: this.queryParams.jh,
        };
        getSelectorData_bgmc(param).then((res) => {
          if (res.success) {
            this.selectorData_bgmc = res.rows;
          } else {
            this.selectorData_bgmc = [];
          }
        })
      } catch (error) {
        console.warn('接口提示', error)
      }
    },

    //处理新增按钮事件
    doAdd() {
    },
    //处理修改按钮事件
    doUpdate(row, rowindex) {
      
    },
    //处理删除按钮事件
    doDelete(row, rowindex) {
    },
    //处理查看按钮事件
    doView(row, rowindex) {
    },
    //处理报告接收按钮事件
    doViewFJ(row, rowindex) {
    },
    //处理导出按钮事件
    doExportExcel() {
      var params = {...this.queryParams.commitedParam};
      for (let key in params) {
        if (/^sel_/.test(key)) {
          var new_key = key.replace(/^sel_/, 'p_');
          params[new_key] = params[key];
        }
      }
      try {
        if (!this.queryParams.commitedParam) {
          this.$message.info({ content: '请先查询数据!', placement: 'center' })
        }
        const filename = this.title + '-' + dayjs().format('YYYYMMDDHHmmssSSS') + '.xls';
        exportExcel(this.download, params, filename);
      } catch (error) {
      }
    },
    //处理下载附件按钮事件
    doDownloadFile(classid, fileid,filename) {
    },
    //处理保存按钮事件
    doSubmit() {
    },
    //处理关闭事件
    doClose() {
      this.OpType.Open = false;
    },
    //处理查看附件按钮关闭事件
    doCloseFJ() {
      this.OpType.OpenFJ = false;
    },
    //查询参数重置按钮事件
    resetQuery() {
      this.queryParams = {...QUERY_PARAMS_INITIALDATA};
      this.getSelectorData_jh();
      this.getSelectorData_bgmc();
    },
    //翻页事件
    handlePageChange(pageInfo) {
      this.getListData()
      // this.pagination.defaultCurrent = pageInfo.current;
    },
    //查询参数改变事件
    onQueryParamChange_fbrq(val) {
      this.queryParams.jh = '';
      this.queryParams.bgmc = '';
      this.getSelectorData_jh();
      this.getSelectorData_bgmc();
    },
    //查询参数改变事件
    onQueryParamChange_jh(val) {
      this.queryParams.bgmc = '';
      this.getSelectorData_bgmc();
    },
    //录入Select下拉列表显示改变事件
    handleSelectVisibleChange(e, r) {
      this.$refs['form-main'].validateField(r);
    },
    //录入Select清除事件
    handleSelectClear(r) {
      this.$refs['form-main'].validateField(r);
    },
    //上传文件改变事件
    handleUploadChange(file, filelist) {
      this.upload.uploadFiles = filelist;
    },
    //上传文件删除前事件
    handleUploadBeforeRemove(file, filelist) {
    },
    //上传文件删除事件
    handleUploadRemove(file, filelist) {
    },
    test() {
      alert(1);
    }
      
  },
})
</script>
<style lang="less" scoped>
.app-container {
  height: 100%;

  .el-table {
    overflow: scroll;
  }
}

::v-deep .el-dialog__body {
  max-height: 60vh;
  overflow-y: auto;
}

/deep/ .is-left > div {
    text-align: left;
}

/deep/ .is-right > div {
    text-align: right;
}

/deep/ .is-left > div {
    text-align: left;
}

/deep/ .is-center > div {
    text-align: center;
}

::v-deep .el-input.is-disabled .el-input__inner,
::v-deep .el-textarea.is-disabled .el-textarea__inner,
::v-deep .el-radio.is-disabled .el-radio__inner,
::v-deep .el-radio.is-disabled .el-radio__label,
::v-deep .el-checkbox.is-disabled .el-checkbox__inner,
::v-deep .el-checkbox.is-disabled .el-checkbox__label {
  background-color: #f6f6f6 !important; /* 示例：改变背景颜色 */
  color: #333 !important; /* 示例：改变文字颜色 */
}

::v-deep .el-upload.el-upload--text {
  margin :0 !important;
}

.mainSearchPanel .page-header-title {
  font-size:16px;
  color: #409EFF;
  font-weight: bolder;
  display: block;
  margin:0;
  padding:0;
  margin:10px 0;
}

.mainSearchPanel .el-divider--horizontal {
  margin:0 !important;
  margin-top:10px;
}
</style>
